<template>
  <div class="More">
    <header>
      <div class="select">
        <div class="back">
          <!-- <router-link to="/Home"> -->
          <i class="glyphicon"></i><span><router-link to="/">首页</router-link></span>
          <!-- </router-link> -->
        </div>
        <div class="input-group">
          <span class="input-group-addon " id="basic-addon1"><i class="glyphicon glyphicon-search"></i></span>
          <input type="text" class="form-control" placeholder="全部应用" aria-describedby="basic-addon1">
        </div>
      </div>
      <div class="myapp">
        <div class="my">
          <span>我的应用</span>
        </div>
        <div class="myapp_icon">
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
        </div>
        <div class="edit">
          <a>编辑</a>
        </div>
      </div>
    </header>
    <section>
      <div class="sec-title">
        <span></span>最近使用
      </div>
      <div class="sec_info">
        <ul>
          <li v-for="item in items">
           <img v-bind:src="item.url" alt="">
            <span>{{item.text}}</span>
          </li>
        </ul>
      </div>
    </section>
    <section>
      <div class="sec-title">
        <span></span>为你推荐
      </div>
      <div class="sec_content">
        <div>
          <a>
            <p>飞猪旅行</p>
            <p>多快好省住酒店</p>
          </a>
        </div>
        <div>
          <a>
            <p>运动</p>
            <p>全民健康捐步</p>
          </a>
        </div>
      </div>
    </section>
    <article>
      <div class="layui-tab layui-tab-brief" >
        <!--lay-filter="docDemoTabBrief" lay-filter="test"上一条删掉的-->
        <ul class="layui-tab-title">
          <li class="layui-this">便民生活</li>
          <li>财富管理</li>
          <li>资金往来</li>
          <li>购物娱乐</li>
          <li>教育培训</li>
        </ul>
        <div class="layui-tab-content">
          <div class="layui-tab-item layui-show">
            <ul>
              <li v-for="info in inf">
                <img v-bind:src="info.url" alt="">
                <span>{{info.text}}</span>
              </li>
            </ul>
          </div>
          <div class="layui-tab-item">
            <ul>
              <li v-for="item in items">
                <img v-bind:src="item.url" alt="">
                <span>{{item.text}}</span>
              </li>
            </ul>
          </div>
          <div class="layui-tab-item">
            <ul>
              <li v-for="item in items">
                <img v-bind:src="item.url" alt="">
                <span>{{item.text}}</span>
              </li>
            </ul>
          </div>
          <div class="layui-tab-item">
            <ul>
              <li v-for="item in items">
                <img v-bind:src="item.url" alt="">
                <span>{{item.text}}</span>
              </li>
            </ul>
          </div>
          <div class="layui-tab-item">
            <ul>
              <li v-for="item in items">
                <img v-bind:src="item.url" alt="">
                <span>{{item.text}}</span>
              </li>
            </ul>
          </div>
          <div class="layui-tab-item">
            <ul>
              <li v-for="item in items">
                <img v-bind:src="item.url" alt="">
                <span>{{item.text}}</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </article>
  </div>
</template>

<script>
    export default {
        name: "More",
      data() {
        return{
          items:[
            {
              url:"../../static/img/more/more_10.jpg",
              text:"蚂蚁森林"
            },{
              url:"../../static/img/more/more_12.jpg",
              text:"生活号"
            },{
              url:"../../static/img/more/more_15.jpg",
              text:"我的快递"
            },{
              url:"../../static/img/more/more_07.jpg",
              text:"ofo小黄车"
            },{
              url:"../../static/img/more/more_20.jpg",
              text:"我的客服"
            },{
              url:"../../static/img/more/more_22.jpg",
              text:"发票管家"
            },{
              url:"../../static/img/more/more_24.jpg",
              text:"爱心捐赠"
            },{
              url:"../../static/img/more/more_26.jpg",
              text:"更多"
            }
          ],
          inf:[
            {
              url:"../../static/img/more/more_32.jpg",
              text:"充值中心"
            },{
              url:"../../static/img/voucher_center/voucher_center_36.jpg",
              text:"信用卡还款"
            },{
              url:"../../static/img/voucher_center/voucher_center_45.jpg",
              text:"生活缴费"
            },{
              url:"../../static/img/more/more_33.jpg",
              text:"城市服务"
            },{
              url:"../../static/img/more/more_37.jpg",
              text:"生活号"
            },{
              url:"../../static/img/more/more_20.jpg",
              text:"我的客服"
            },{
              url:"../../static/img/more/more_15.jpg",
              text:"我的快递"
            },{
              url:"../../static/img/more/more_38.jpg",
              text:"医疗健康"
            },{
              url:"../../static/img/voucher_center/voucher_center_58.jpg",
              text:"记账本"
            },{
              url:"../../static/img/more/more_22.jpg",
              text:"发票管理"
            },{
              url:"../../static/img/voucher_center/voucher_center_56.jpg",
              text:"火车票机票"
            },{
              url:"../../static/img/voucher_center/voucher_center_48.jpg",
              text:"滴滴出行"
            }
          ]

        }

      },
      mounted() {
        // 选项卡
        //
        // 注意：选项卡 依赖 element 模块，否则无法进行功能性操作
        layui.use('element', function(){
          var element = layui.element;

          //一些事件监听
          element.on('tab(demo)', function(data){
            console.log(data);
          });
        });

        // element.on('tab(filter)', function(data){
        //   console.log(this); //当前Tab标题所在的原始DOM元素
        //   console.log(data.index); //得到当前Tab的所在下标
        //   console.log(data.elem); //得到当前的Tab大容器
        // });
        }
    }
</script>

<style scoped>
  @import "../../static/css/more.css";
</style>
